<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue'
	import { onBackPress } from "@dcloudio/uni-app"
	import { getReports } from '@/api/psychology/report.js'

	import { musicClassLists } from '@/api/groupActivies/index.js'
	import { getTasks, getScales } from '@/api/psychology/task.js'
	import { userInfo } from '@/store/Pinia/userInfo.js'


	const colorList =ref([
		{
		lightColor:'radial-gradient(circle, rgb(231, 173, 104), rgba(0, 0, 0, 0) 80%);',
		musicBoxColor:'rgba(255, 144, 12, 0.39)'
	},
	// {
	// 	lightColor: 'radial-gradient(circle, #b67bf4, rgba(0, 0, 0, 0) 80%)',
	// 	musicBoxColor: 'linear-gradient(224deg, rgba(169, 33, 247, 0.8) 12.68%, rgba(182, 123, 244,08) 99.93%), #FAFAFA'
	// },
	{
		lightColor:'radial-gradient(circle, #b67bf4, rgba(0, 0, 0, 0) 80%)',
		musicBoxColor:'rgba(182, 123, 244, 0.39)'
	},{
		lightColor:'radial-gradient(circle, #3186fc, rgba(0, 0, 0, 0) 80%)',
		musicBoxColor:'rgba(82, 132, 249, 0.39)'
	},{
		lightColor:'radial-gradient(circle, #eb6f9b, rgba(0, 0, 0, 0) 80%)',
		musicBoxColor:'rgba(214, 121, 153, 0.39)'
	},]);
	let tasks = ref<any[]>([]);

	const musicMoudleList = ref([])
	const getMusicClassLists = () => {
		let item = {
			"pid": "3"
		}
		musicClassLists(item).then(res => {
			if (res.data.code == 200) {
				musicMoudleList.value = res.data.data
				console.log('musicMoudleList', musicMoudleList.value)
			}
		})
	}
	onMounted(() => {
		getMusicClassLists()
	})
	// 当前选中的标签索引 
	const back = () => {
		console.log('hhhhhhhh')
		uni.navigateBack()
	}

	// 计算页面高度
	const custHeight = computed(() => {
		let systemInfo = uni.getSystemInfoSync()
		return function () {
			console.log(systemInfo)
			return systemInfo.screenHeight - systemInfo.windowTop
		}
	})

	const toMusic = (index,item) => {
		console.log('itemitemitemitem',item)
		uni.navigateTo({
			url: `/pages/musicRelax/musicList/musicList?id=${item.id}&title=${item.name}&lightColor=${colorList.value[index].lightColor}&musicBoxColor=${colorList.value[index].musicBoxColor}`
		})
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
	<!-- <Navigator :fixed="true" background-color="#fa973a" status-bar title="" left-icon="back" left-text="返回" customLeft
		@clickLeft="back">
	</Navigator> -->
	<articleTable ref="timer"></articleTable>
	<view @touchend="handleEnd" class="wh100p " style="background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);">
		<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" customLeft
			@clickLeft="back" style="height: 2%;">
		</Navigator> 
		<!-- 主体 -->
		<view style="height: 98%;">
			<view style="display: flex;justify-content:space-evenly;flex-wrap: wrap;height: 100%;padding: 0px 160px 0 160px;">
				<text
					style="color: white;text-align: center;font-weight: 600;width: 100%;font-size: 60px;font-weight: 600;margin-top: 4%; ">
					音乐放松</text>
				<view
					style="height: 70%;width: 23%;border-radius: 37.333px;display: flex;flex-wrap: wrap;justify-content: center;align-items: center; "
					:class="{
					    c1: index === 0,
					    c2: index === 1,
					    c3: index === 2,
						c4: index === 3
					  }" v-for="(item,index) in musicMoudleList" @click="toMusic(index,item)">
					<view style="width: 100%;display:flex;flex-wrap: wrap;text-align: center;">
						<img style="width: 30%;margin-left: 35%;height: 30%;" class="avatar"
							:src="'@/../static/img/sun.svg'" v-if="index == 0" />
						<img style="width: 30%;margin-left: 35%;height: 30%;" class="avatar"
							:src="'@/../static/img/clock.svg'" v-if="index == 1" />
						<img style="width: 30%;margin-left: 35%;height: 30%;" class="avatar"
							:src="'@/../static/img/sound.svg'" v-if="index == 2" />
						<img style="width: 30%;margin-left: 35%;height: 30%;" class="avatar"
							:src="'@/../static/img/music.svg'" v-if="index == 3" />

						<view class="title"
							style="font-size: 2.5rem;color: white;width: 100%;margin-top: 13%;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style>
	.c1 {
		background: linear-gradient(222deg, #E3D694 3.79%, #E7AD68 97.63%), #FAFAFA;
	}

	.c2 {
		background: linear-gradient(224deg, #B8A1F7 2.68%, #B67BF4 99.93%), #FAFAFA;
	}

	.c3 {
		background: linear-gradient(180deg, #49BEFF 0%, #3186FC 100%), linear-gradient(239deg, #91D6A9 17.23%, #66C181 99.93%), #FAFAFA;
	}

	.c4 {
		background: linear-gradient(223deg, #EB9CA1 3.08%, #EB6F9B 98.48%), linear-gradient(0deg, #638AFF 0%, #638AFF 100%), #FFF;
	}

	.title {
		font-size: 36rpx;
		line-height: 70rpx;
	}

	.dec {
		margin-top: 20rpx;
		font-size: 30rpx;
		padding: 10rpx 20rpx;
		line-height: 40rpx;
		overflow: hidden;
		height: 150rpx;
		text-overflow: ellipsis;
		word-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.music-class-box {
		padding: 0 5%;
		display: flex;
	}

	.card {
		width: 800rpx;
		height: 200px;

	}

	.cu-item {
		transition: all .6s ease-in-out 0s;
		transform: translateX(0upx)
	}

	.bgcolor {
		background: linear-gradient(rgba(255, 217, 181, 0.80), #f3f3f3);

	}

	.avatar {
		width: 25%;
		/* border-radius: 50%; */
	}

	page {
		background-color: ;
	}
</style>